import 'package:flutter/material.dart';
import 'package:my_salary/pages/settings/theme/theme_controller.dart';
import 'package:provider/provider.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

import 'theme_preview.dart';

class ThemeModePage extends StatefulWidget {
  const ThemeModePage({super.key});

  @override
  State<ThemeModePage> createState() => _ThemeModePageState();
}

class _ThemeModePageState extends State<ThemeModePage> {
  late ThemeMode _tempMode;

  @override
  void initState() {
    super.initState();
    _tempMode = context.read<ThemeController>().themeMode;
  }

  @override
  Widget build(BuildContext context) {
    final l10n = AppLocalizations.of(context)!;
    final theme = _tempMode == ThemeMode.dark
        ? ThemeData.dark(useMaterial3: true)
        : ThemeData.light(useMaterial3: true);

    return Scaffold(
      appBar: AppBar(title: Text(l10n.themeModeTitle)),
      body: Column(
        children: [
          // 预览区域
          Container(
            height: 280,
            margin: const EdgeInsets.all(16),
            child: ThemePreview(theme: theme),
          ),

          // 列表选择
          Expanded(
            child: ListView(
              children: [
                RadioListTile<ThemeMode>(
                  title: Text(l10n.themeModeFollowSystem),
                  value: ThemeMode.system,
                  groupValue: _tempMode,
                  onChanged: (val) => setState(() => _tempMode = val!),
                ),
                RadioListTile<ThemeMode>(
                  title: Text(l10n.themeModeLight),
                  value: ThemeMode.light,
                  groupValue: _tempMode,
                  onChanged: (val) => setState(() => _tempMode = val!),
                ),
                RadioListTile<ThemeMode>(
                  title: Text(l10n.themeModeDark),
                  value: ThemeMode.dark,
                  groupValue: _tempMode,
                  onChanged: (val) => setState(() => _tempMode = val!),
                ),
              ],
            ),
          ),

          // 底部按钮
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: ElevatedButton(
              onPressed: () {
                context.read<ThemeController>().updateTheme(_tempMode);
                Navigator.pop(context);
              },
              style: ElevatedButton.styleFrom(
                  minimumSize: const Size.fromHeight(48)),
              child: Text(l10n.commonApply),
            ),
          ),
        ],
      ),
    );
  }
}
